<div class="centered">

    <card-layout class="not-centered" style="" flex="initial" ng-class="{'card-width':vm.cardWidth, 'card-full-width':!vm.cardWidth }">
        <header-section>

            <div class="card-title" flex>管道详情</div>

        </header-section>

        <body-section transclude-to="body" class="md-padding">

            <md-tabs md-dynamic-height md-border-bottom md-selected="vm.selectedTabIndex">
                <md-tab>
                    <md-tab-label>
                        <div>详情</div>
                    </md-tab-label>
                    <md-tab-body>
                        <md-progress-linear md-mode="indeterminate" ng-if="vm.loadingFeedData"></md-progress-linear>
                        <thinkbig-feed-info ng-if="!vm.loadingFeedData && vm.model.loaded" selected-tab-index="vm.selectedTabIndex"></thinkbig-feed-info>
                        <div ng-if="vm.loadingFeedData" class="layout-padding" style="min-height:200px;height:200px;">加载管道</div>
                        <div ng-if="!vm.loadingFeedData && vm.model.loaded == false && vm.loadMessage != '' " class="layout-padding">{{vm.loadMessage}}</div>
                      <div ng-if="vm.errorLoadingFeed" class="layout-padding">无法找到管道。 此管道不存在或您无权查看.</div>
                    </md-tab-body>
                </md-tab>
                <md-tab ng-disabled="vm.loadingFeedData || vm.errorLoadingFeed">
                    <md-tab-label>
                        <div>属性</div>
                    </md-tab-label>
                    <md-tab-body>
                        <thinkbig-feed-profile-history ng-if="vm.selectedTabIndex == 1"></thinkbig-feed-profile-history>
                    </md-tab-body>
                </md-tab>
                <md-tab ng-disabled="vm.loadingFeedData || vm.errorLoadingFeed">
                    <md-tab-label>
                        <div>血缘</div>
                    </md-tab-label>
                    <md-tab-body>
                       <thinkbig-feed-lineage  ng-if="vm.selectedTabIndex == 2"></thinkbig-feed-lineage>
                    </md-tab-body>
                </md-tab>
                <md-tab ng-disabled="vm.loadingFeedData || !vm.allowSlaAccess || vm.errorLoadingFeed">
                    <md-tab-label>
                        <div>SLA</div>
                    </md-tab-label>
                    <md-tab-body>
                        <thinkbig-service-level-agreement view="feed" feed="vm.model" ng-if="vm.selectedTabIndex == 3" new-sla="vm.newSla"></thinkbig-service-level-agreement>
                    </md-tab-body>
                </md-tab>
                <md-tab ng-disabled="true">
                    <md-tab-label>
                        <div>版本</div>
                    </md-tab-label>
                    <md-tab-body>
                       历史版本
                    </md-tab-body>
                </md-tab>
            </md-tabs>
        </body-section>

    </card-layout>

    <card-layout style="max-width:350px;width:350px;min-width:350px;" flex="initial" body-css="md-padding">
        <header-section>
          <div layout="row" layout-align="space-between center">
            <div class="card-title" flex>管道概括</div>
            <div layout-align="center center" layout="column">
            <md-menu md-position-mode="target-right target">
              <md-button aria-label="Options" class="md-icon-button" style="margin-top:-10px;margin-right:-10px" ng-click="vm.openFeedMenu($mdOpenMenu, $event)" ng-disabled="vm.loadingFeedData || vm.errorLoadingFeed">
                <ng-md-icon icon="more_vert"></ng-md-icon>
              </md-button>
              <md-menu-content width="4">

                <md-menu-item ng-if="vm.model.state == 'ENABLED'" ng-click="vm.disableFeed()">
                  <md-button ng-disabled="(vm.disabling || !vm.allowEdit)">
                    <ng-md-icon icon="not_interested" class="orange"></ng-md-icon>
                      禁用
                  </md-button>
                </md-menu-item>
                <md-menu-item ng-if="vm.model.state != 'ENABLED'"  ng-click="vm.enableFeed()" >
                  <md-button ng-disabled="(vm.enabling || !vm.allowEdit)">
                    <ng-md-icon icon="check_circle" class="orange" md-menu-align-target=""></ng-md-icon>
                      启用
                  </md-button>
                </md-menu-item>
                <md-menu-item ng-click="vm.cloneFeed()" >
                  <md-button ng-disabled="!vm.allowEdit">
                    <ng-md-icon icon="content_copy" class="orange" md-menu-align-target=""></ng-md-icon>
                    复制
                  </md-button>
                </md-menu-item>
                <md-menu-item ng-if="vm.model.state != 'ENABLED'" ng-click="vm.confirmDeleteFeed()">
                  <md-button ng-disabled="(vm.enabling || !vm.allowAdmin)">
                    <ng-md-icon icon="delete_forever" class="orange" md-menu-align-target=""></ng-md-icon>
                    删除...
                  </md-button>
                </md-menu-item>
                <md-menu-divider ng-if="vm.uploadAllowed"></md-menu-divider>
                <md-menu-item ng-if="vm.uploadAllowed">
                  <md-button ng-click="vm.showFeedUploadDialog()" ng-disabled="vm.model.state != 'ENABLED'">
                    <ng-md-icon icon="file_upload"  class="primary-color-1"  md-menu-align-target=""></ng-md-icon>
                    上传...
                  </md-button>
                </md-menu-item>
                <md-menu-divider ng-if="vm.allowExport"></md-menu-divider>
                <md-menu-item  ng-if="vm.allowExport">
                  <md-button href="{{vm.exportFeedUrl}}" >
                    <ng-md-icon icon="launch" size="20" style="fill:#F08C38"></ng-md-icon>
                    <span>导出</span>
                  </md-button>
                </md-menu-item>
                <md-menu-divider  ng-if="vm.allowChangePermissions"></md-menu-divider>
                <md-menu-item ng-if="vm.allowChangePermissions">
                  <md-button ng-click="vm.showAccessControlDialog()" >
                    <ng-md-icon icon="lock" size="20" style="fill:#F08C38"></ng-md-icon>
                    <span>访问控制</span>
                  </md-button>
                </md-menu-item>
              </md-menu-content>

            </md-menu>
            </div>
          </div>
          <div layout="column" class="layout-padding-top-bottom">
            <span class="item-title" ng-if="!vm.loadingFeedData">{{vm.model.feedName}}</span>
          </div>
        </header-section>

        <body-section>
            <div layout="column" class="layout-padding-top" ng-if="vm.loadingFeedData">
                加载管道 ...
            </div>

            <div layout="column" class="layout-padding-top" ng-if="!vm.loadingFeedData">

                <md-progress-linear md-mode="indeterminate" ng-if="vm.enabling || vm.disabling"></md-progress-linear>
                <div layout="column" class="layout-padding-top-bottom">
                    <span class="hint">状态</span>
                    <span ng-class="{'enabled':vm.model.state == 'ENABLED','disabled':vm.model.state == 'DISABLED'}"> {{vm.model.state|fstatus}}
                      <ng-md-icon
                        style="padding-left:10px" icon="{{vm.model.stateIcon}}" size="20"></ng-md-icon>
                    </span>

                </div>
                <div layout="column" class="layout-padding-top-bottom" ng-if="vm.model.dataOwner">
                    <span class="hint">数据所有者 </span>
                    <span>{{vm.model.dataOwner}}</span>

                </div>
                <div layout="column" class="layout-padding-top-bottom">
                    <span class="hint">表</span>
                    <div class="primary-color-1" style="cursor:pointer;" ng-click="vm.onTableClick()">{{vm.model.table.tableSchema.name}}</div>

                </div>
                <div layout="column" class="layout-padding-top-bottom"  ng-if="vm.model.tags">
                    <span class="hint">标签</span>
                    <span ng-repeat="tag in vm.model.tags">
                        {{tag.name}}

                    </span>

                </div>
                <div layout="column" class="layout-padding-top-bottom">
                    <span class="hint">类型</span>
                    <div layout="row" layout-align="start center" ng-click="vm.onCategoryClick()" class="primary-color-1" style="cursor: pointer;">
                        <span>{{vm.model.category.name}}</span>
                        <ng-md-icon icon="{{vm.model.category.icon}}" style="padding-left:10px;" ng-style="{'fill':vm.model.category.iconColor}" ng-if="vm.model.category.icon != null"></ng-md-icon>
                        <span flex></span>
                    </div>

                </div>

              <md-divider></md-divider>
              <div layout="column" class="layout-padding-top-bottom" layout-align="space-between start" ng-if="!vm.errorLoadingFeed">
                <div class="md-subheader layout-padding-bottom">操作 管理</div>
                <span class="layout-padding-bottom">
                  <a href ng-click="vm.gotoFeedStats($event)">操作 统计</a>
                </span>
                <span class="layout-padding-bottom">
                <a href ng-click="vm.gotoFeedDetails($event)" ng-if="!vm.model.isStream">操作作业详情</a>
                </span>
              </div>

              <md-divider ng-if="!vm.isNiFiRunning"></md-divider>
              <div layout="row" class="warn layout-padding-top-bottom" ng-if="!vm.isNiFiRunning">
                 <ng-md-icon style="margin:inherit;" class="error" icon="error" size="20"></ng-md-icon>
                 <span class="error">NiFi 不在运行</span>
              </div>
                <!--
                    <md-button ng-click="addAlert()" class="md-primary" ng-disabled="true" ng-if="vm.allowEdit">
                        ADD ALERT
                    </md-button>

                    <md-button ng-click="vm.addSla()" class="md-primary" ng-disabled="vm.model.state != 'ENABLED'  && !vm.loadingFeedData" ng-if="vm.allowEdit">
                        CREATE SLA
                    </md-button>
                -->
            </div>
        </body-section>
    </card-layout>
</div>
